<template>
  <div class="lxl-vp">
    <div class="content">
      <el-header class="header">
        <h1>吴川市武装部大数据分析平台</h1>
      </el-header>
      <!-- 主内容区 -->
      <section class="mainbox">
        <div class="col">
          <div class="panel bar">
            <h2>征兵潜力数据分析</h2>
            <potential-data></potential-data>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line">
            <h2>预征对象数据分析</h2>
            <prefetch-object-data></prefetch-object-data>
            <div class="panel-footer"></div>
          </div>
        </div>
        <div class="col cols">
          <div class="map">
            <wuchuan-map></wuchuan-map>
          </div>
        </div>
        <div class="col">
          <div class="panel bar2">
            <h2>体格检查情况分析</h2>
            <medical-examination></medical-examination>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie2">
            <h2>精准定兵数据分析</h2>
            <precise-troop-data></precise-troop-data>
            <div class="panel-footer"></div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import WuchuanMap from "./WuchuanMap.vue";
import PotentialData from "./potentialData.vue";
import PrefetchObjectData from "./prefetchObjectData.vue"
import MedicalExamination from "./medicalExamination.vue"
import PreciseTroopData from "./preciseTroopData.vue"
export default defineComponent({
  name: "visual",
  components: { WuchuanMap, PotentialData, PrefetchObjectData, MedicalExamination, PreciseTroopData },
  setup() {},
});
</script>

<style scoped>
.lxl-vp {
  font-family: Arial, Helvetica, sans-serif;
  background-image: url("../../../public/img/visual/visualBg.png");
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.header {
  position: relative;
  /* height: 5rem; */
  height: 10%;
  background: url(../../../public/img/visual/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
}
/* .body_header {
  color: aliceblue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 4rem;
  background: url(../../../public/img/visual/head_bg.png) no-repeat top center;
} */
.content {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
  background: url(../../../public/img/visual/visualBg.png) no-repeat #000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
  min-width: 1480px;
  max-width: 100%;
   height: 100%;
}
header h1 {
  font-size: 2rem;
  color: #fff;
  text-align: center;
  line-height: 4rem;
  margin-left: 40%;
}
.mainbox {
  display: flex;
  padding: 0.125rem 0.125rem 0;
  /* height: 680px; */
  height: 90%;
}
.col {
  flex: 2.7;
}
.map {
  position: relative;
}
.chartMap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  height: 45rem;
  width: 100%;
}
.cols {
  position: relative;
}
.panel {
  position: relative;
  /* height: 338px; */
  height: 50%;
  width: 100%;
  border: 1px solid rgba(25, 186, 139, 0.17);
  /* background: rgba(255, 255, 255, 0.04) url(../../assets/line\(1\).png); */
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
}
.panel h2 {
  color: rgb(229, 246, 250);
  height: 0.6rem;
  line-height: 0.6rem;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 5px;
}
/* 通过伪类设置边角 */
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.panel h2 {
  color: rgb(229, 246, 250);
  height: 0.6rem;
  line-height: 0.6rem;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  margin: 1rem 0;
}
</style>
